<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color:red">Count组件求和为:{{ sum }}</h3>
    <h3>列表中第一个人的名字是:{{ firstPersonName  }}</h3>
    <input type="text" placeholder="请输入名字" v-model="name">
    <button @click="addPerson"> 添加</button>
    <button @click="addWang"> 添加一个姓王的</button>
    <button @click="addPersonServer"> 添加一个服务器的名字</button>
   <ul v-for="item in personList" :key="item.id">{{ item.name}}</ul>
  </div>
</template>

<script>
import { nanoid } from 'nanoid';
export default {
  name: "Person",
  data() {
    return {
      name:""
    }
  },
  computed: {
    // ...mapState(["personList","sum"])
    sum(){
      return this.$store.state.countOptions.sum;
    },
    personList(){
      return this.$store.state.personOptions.personList;
    },
    firstPersonName(){
      return this.$store.getters["personOptions/firstPersonName"]
    }
  },
  methods:{
    addPerson(){
      const person ={id:nanoid(),name:this.name} 
      this.$store.commit("personOptions/ADD_PERSON",person)
      this.name=""
    },
    addWang(){
      const person ={id:nanoid(),name:this.name} 
      this.$store.dispatch("personOptions/addPersonWang",person)
      this.name=""
    },
    addPersonServer(){
      this.$store.dispatch("personOptions/addPersonServer")
    }
  }
};
</script>
<style scoped>
button {
  margin-left: 10px;
}
</style>
